<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>师生大模型 - 学生管理</title>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/manager.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.1.0/docx.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

</head>
<body>

<div class="student-management-page">
    <header class="main-header">
        <div class="logo">
            <i class="fas fa-graduation-cap"></i>
            <h1>师生大模型管理系统</h1>
        </div>

        <div class="user-menu">
            <span class="username" id="username">加载中...</span>
        </div>

        <!-- 管理员个人信息弹窗 -->
        <div class="admin-modal" id="userModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>管理员信息</h3>
                    <span class="close-modal">&times;</span>
                </div>
                <div class="modal-body" id="adminInfo">
                    <div class="loading">加载中...</div>
                </div>
                <div class="modal-footer">
                    <button class="logout-btn" id="logoutBtn">退出登录</button>
                </div>
            </div>
        </div>
    </header>

    <div class="main-container">
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <ul>
                    <li class="active studentRa" index="student"><a href="#"><i class="fas fa-users"></i> <span>学生管理</span></a></li>
                    <li class="teacherRa" index="teacher"><a href="#"><i class="fas fa-chalkboard-teacher"></i> <span>教师管理</span></a></li>
                    <li class="classRa" index="class"><a href="#"><i class="fas fa-book"></i> <span>班级管理</span></a></li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <!-- 学生管理盒子（默认显示） -->
            <div class="content-box active student" id="student-box">
                <!-- 原学生管理的内容（保持不变） -->
                <div class="content-header">
                    <h2>学生管理</h2>
                    <button id="add-student" class="btn primary addStu">
                        <i class="fas fa-plus"></i> 添加学生
                    </button>
                </div>

                <!-- 搜索栏与筛选框在同一行，筛选框居右 -->
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box">
                            <input type="text" placeholder="搜索学生姓名..." class="search-input" id="search-name">
                            <input type="text" placeholder="搜索手机号..." class="search-input" id="search-phone">
                            <button class="search-btn" id="search-btn"><i class="fas fa-search"></i></button>
                        </div>
                    </div>

                    <!-- 班级筛选框放在最右侧 -->
                    <div class="filter-options">
                        <select class="form-select" id="class-filter">
                            <option value="0">全部班级</option>
                            <option value="1">高一(1)班</option>
                            <option value="2">高一(2)班</option>
                            <option value="3">高一(3)班</option>
                            <option value="4">高二(1)班</option>
                            <option value="5">高二(2)班</option>
                            <option value="6">高三(1)班</option>
                        </select>
                    </div>
                </div>

                <div class="card">
                    <table class="data-table stuContentBox">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>班级</th>
                            <th>学号</th>
                            <th>联系方式</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
<!--                        <tr>-->
<!--                            <td>1</td>-->
<!--                            <td>张三</td>-->
<!--                            <td>男</td>-->
<!--                            <td>18</td>-->
<!--                            <td>一班</td>-->
<!--                            <td>2023001</td>-->
<!--                            <td>13800138000</td>-->
<!--                            <td class="action-buttons">-->
<!--                                <button class="btn icon edit" title="编辑"><i class="fas fa-edit"></i></button>-->
<!--                                <button class="btn icon delete" title="删除"><i class="fas fa-trash"></i></button>-->
<!--                            </td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td>2</td>-->
<!--                            <td>李四</td>-->
<!--                            <td>女</td>-->
<!--                            <td>17</td>-->
<!--                            <td>二班</td>-->
<!--                            <td>2023002</td>-->
<!--                            <td>13900139000</td>-->
<!--                            <td class="action-buttons">-->
<!--                                <button class="btn icon edit" title="编辑"><i class="fas fa-edit"></i></button>-->
<!--                                <button class="btn icon delete" title="删除"><i class="fas fa-trash"></i></button>-->
<!--                            </td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td>3</td>-->
<!--                            <td>王五</td>-->
<!--                            <td>男</td>-->
<!--                            <td>18</td>-->
<!--                            <td>三班</td>-->
<!--                            <td>2023003</td>-->
<!--                            <td>13700137000</td>-->
<!--                            <td class="action-buttons">-->
<!--                                <button class="btn icon edit" title="编辑"><i class="fas fa-edit"></i></button>-->
<!--                                <button class="btn icon delete" title="删除"><i class="fas fa-trash"></i></button>-->
<!--                            </td>-->
<!--                        </tr>-->
                        </tbody>
                    </table>
                </div>

                <div class="pagination stuPageBox">
<!--                    <button class="btn page" title="上一页"><i class="fas fa-chevron-left"></i></button>-->
<!--                    <button class="btn page active">1</button>-->
<!--                    <button class="btn page">2</button>-->
<!--                    <button class="btn page">3</button>-->
<!--                    <button class="btn page">4</button>-->
<!--                    <button class="btn page">5</button>-->
<!--                    <button class="btn page" title="下一页"><i class="fas fa-chevron-right"></i></button>-->
                </div>
                <div class="explain-text" style="text-align: center; margin-top: 8px; color: #999;">
                    提示：搜索后点击左侧"学生管理"可实现重置。
                </div>
            </div>

            <!-- 教师管理盒子（默认隐藏） -->
            <!-- 在原有的HTML基础上，找到教师管理盒子（id="teacher-box"），替换为以下内容 -->
            <!-- 教师管理盒子 -->
            <div class="content-box teacher" id="teacher-box">
                <div class="content-header">
                    <h2>教师管理</h2>
                    <button id="add-teacher" class="btn primary addTeacher">
                        <i class="fas fa-plus"></i> 添加教师
                    </button>
                </div>

                <!-- 搜索栏与筛选框 -->
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box">
                            <input type="text" placeholder="搜索教师姓名..." class="search-input" id="search-teacher-name">
                            <input type="text" placeholder="搜索手机号..." class="search-input" id="search-teacher-phone">
                            <button class="search-btn" id="search-teacher-btn"><i class="fas fa-search"></i></button>
                        </div>
                    </div>

                    <!-- 班级筛选框 -->
                    <div class="filter-options">
                        <select class="form-select" id="teacher-class-filter">
                            <option value="">全部班级</option>
                            <option value="1">高一(1)班</option>
                            <option value="2">高一(2)班</option>
                            <option value="3">高一(3)班</option>
                            <option value="4">高二(1)班</option>
                            <option value="5">高二(2)班</option>
                            <option value="6">高三(1)班</option>
                        </select>
                    </div>
                </div>

                <div class="card">
                    <table class="data-table teacherContentBox">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>所属班级</th>
                            <th>工号</th>
                            <th>联系方式</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 动态填充数据 -->
                        </tbody>
                    </table>
                </div>

                <div class="pagination teacherPageBox">
                    <!-- 动态生成分页 -->
                </div>
                <div class="explain-text" style="text-align: center; margin-top: 8px; color: #999;">
                    提示：搜索后点击左侧"教师管理"可实现重置。
                </div>
            </div>

            <!-- 添加教师弹窗 -->
            <div id="add-teacher-modal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>添加教师</h3>
                        <button class="close-modal" id="close-teacher-modal"><i class="fas fa-times"></i></button>
                    </div>

                    <form class="modal-form" id="teacher-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="teacher-name">姓名</label>
                                <input type="text" id="teacher-name" required>
                            </div>
                            <div class="form-group">
                                <label for="teacher-gender">性别</label>
                                <select id="teacher-gender" required>
                                    <option value="">请选择</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="teacher-age">年龄</label>
                                <input type="number" id="teacher-age" required min="1" max="100">
                            </div>
                             <div class="form-group">
                                <label for="teacher-class">班级</label>
                                <select id="teacher-class" required>
                                    <option value="">请选择</option>
                                    <!-- 班级选项将通过JS动态加载 -->
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="teacher-work-no">工号</label>
                                <input type="text" id="teacher-work-no" required>
                            </div>
                            <div class="form-group">
                                <label for="teacher-phone">联系方式</label>
                                <input type="tel" id="teacher-phone" required>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn secondary" id="cancel-teacher-btn">取消</button>
                            <button type="submit" class="btn primary addTeacherBtn">确认</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 修改教师弹窗 -->
            <div id="update-teacher-modal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>修改教师</h3>
                        <button class="close-modal" id="close-update-teacher-modal"><i class="fas fa-times"></i></button>
                    </div>

                    <form class="modal-form" id="update-teacher-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="update-teacher-name">姓名</label>
                                <input type="text" id="update-teacher-name" required>
                            </div>
                            <div class="form-group">
                                <label for="update-teacher-gender">性别</label>
                                <select id="update-teacher-gender" required>
                                    <option value="">请选择</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="update-teacher-age">年龄</label>
                                <input type="number" id="update-teacher-age" required min="1" max="100">
                            </div>
                            <div class="form-group">
                                <label for="update-teacher-class">班级</label>
                                <select id="update-teacher-class" required>
                                    <option value="">请选择</option>
                                    <!-- 班级选项将通过JS动态加载 -->
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="update-teacher-work-no">工号</label>
                                <input type="text" id="update-teacher-work-no" required>
                            </div>
                            <div class="form-group">
                                <label for="update-teacher-phone">联系方式</label>
                                <input type="tel" id="update-teacher-phone" required>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn secondary" id="cancel-update-teacher-btn">取消</button>
                            <button type="submit" class="btn primary updateTeacherBtn">确认</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 班级管理盒子（默认隐藏） -->
            <!-- 班级管理盒子（默认隐藏） -->
            <div class="content-box class" id="class-box">
                <div class="content-header">
                    <h2>班级管理</h2>
                    <button id="add-class" class="btn primary addClass">
                        <i class="fas fa-plus"></i> 添加班级
                    </button>
                </div>

                <!-- 搜索栏 -->
                <div class="filter-bar">
                    <div class="search-boxes">
                        <div class="search-box">
                            <input type="text" placeholder="搜索班级名称..." class="search-input" id="search-class-name">
                            <button class="search-btn" id="search-class-btn"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <table class="data-table classContentBox">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>班级名称</th>
                            <th>学生人数</th>
                            <th>班级教师</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 动态填充数据 -->
                        </tbody>
                    </table>
                </div>

                <div class="pagination classPageBox">
                    <!-- 动态生成分页 -->
                </div>
                <div class="explain-text" style="text-align: center; margin-top: 8px; color: #999;">
                    提示：搜索后点击左侧"班级管理"可实现重置。
                </div>
            </div>

            <!-- 添加班级弹窗 -->
            <div id="add-class-modal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>添加班级</h3>
                        <button class="close-modal" id="close-class-modal"><i class="fas fa-times"></i></button>
                    </div>

                    <form class="modal-form" id="class-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="class-name">班级名称</label>
                                <input type="text" id="class-name" required>
                            </div>
                            <div class="form-group">
                                <label for="class-teacher">班级教师</label>
                                <select id="class-teacher" required>
                                    <option value="">请选择</option>
                                    <!-- 教师选项将通过JS动态加载 -->
                                </select>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn secondary" id="cancel-class-btn">取消</button>
                            <button type="submit" class="btn primary addClassBtn">确认</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 修改班级弹窗 -->
            <div id="update-class-modal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>修改班级</h3>
                        <button class="close-modal" id="close-update-class-modal"><i class="fas fa-times"></i></button>
                    </div>

                    <form class="modal-form" id="update-class-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="update-class-name">班级名称</label>
                                <input type="text" id="update-class-name" required>
                            </div>
                            <div class="form-group">
                                <label for="update-class-teacher">班级教师</label>
                                <select id="update-class-teacher" required>
                                    <option value="">请选择</option>
                                    <!-- 教师选项将通过JS动态加载 -->
                                </select>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn secondary" id="cancel-update-class-btn">取消</button>
                            <button type="submit" class="btn primary updateClassBtn">确认</button>
                        </div>
                    </form>
                </div>
            </div>



        </main>
    </div>

    <!-- 添加学生弹窗 -->
    <div id="add-student-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加学生</h3>
                <button class="close-modal" id="close-modal"><i class="fas fa-times"></i></button>
            </div>

            <form class="modal-form" id="student-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="student-name">姓名</label>
                        <input type="text" id="student-name" required>
                    </div>
                    <div class="form-group">
                        <label for="student-gender">性别</label>
                        <select id="student-gender" required>
                            <option value="">请选择</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="student-age">年龄</label>
                        <input type="number" id="student-age" required min="1" max="100">
                    </div>
                    <div class="form-group">
                        <label for="student-class">班级</label>
                        <select id="student-class" required>
                            <option value="">请选择</option>
                            <option value="1">高一(1)班</option>
                            <option value="2">高一(2)班</option>
                            <option value="3">高一(3)班</option>
                            <option value="4">高二(1)班</option>
                            <option value="5">高二(2)班</option>
                            <option value="6">高三(1)班</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="student-id">学号</label>
                        <input type="text" id="student-id" required>
                    </div>
                    <div class="form-group">
                        <label for="student-phone">联系方式</label>
                        <input type="tel" id="student-phone" required>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn secondary" id="cancel-btn">取消</button>
                    <button type="submit" class="btn primary addStuBtn">确认</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 修改学生弹窗 -->
    <div id="update-student-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>修改学生</h3>
                <button class="close-modal" ><i class="fas fa-times"></i></button>
            </div>

            <form class="modal-form" >
                <div class="form-row">
                    <div class="form-group">
                        <label for="student-name">姓名</label>
                        <input type="text" id="stu-name" required>
                    </div>
                    <div class="form-group">
                        <label for="student-gender">性别</label>
                        <select id="stu-gender" required>
                            <option value="">请选择</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="student-age">年龄</label>
                        <input type="number" id="stu-age" required min="1" max="100">
                    </div>
                    <div class="form-group">
                        <label for="student-class">班级</label>
                        <select id="stu-class" required>
                            <option value="">请选择</option>
                            <option value="1">高一(1)班</option>
                            <option value="2">高一(2)班</option>
                            <option value="3">高一(3)班</option>
                            <option value="4">高二(1)班</option>
                            <option value="5">高二(2)班</option>
                            <option value="6">高三(1)班</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="student-id">学号</label>
                        <input type="text" id="stu-id" required>
                    </div>
                    <div class="form-group">
                        <label for="student-phone">联系方式</label>
                        <input type="tel" id="stu-phone" required>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn secondary" id="can-btn">取消</button>
                    <button type="submit" class="btn primary updStuBtn">确认</button>
                </div>
            </form>
        </div>
    </div>


    <!-- AI Analysis Popup -->
    <div id="ai-analysis-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>AI分析结果</h3>
                <button class="close-modal" id="close-ai-modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="analysis-result">
                    <label>分析结果:</label>
                    <textarea id="ai-analysis-text" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn primary" id="download-analysis-btn">
                    <i class="fas fa-download"></i> 下载分析结果
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
